<template>
  <el-container>
    <el-main>
      <el-card class="box-card" style="font-size: 12px;">
        <el-row>
          <el-col :span="8">
            商户名称：
            <el-select v-model="formData.merchantName" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="7">
            省市：
            <el-select v-model="formData.provinceCity" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="8">
            <div class="block">
              <span class="demonstration">选择日期：</span>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">
            订单编号：
            <el-input
              placeholder="请输入内容"
              v-model="formData.orderNumber"
              clearable
              style="width: 220px;"
            ></el-input>
          </el-col>

          <el-col :span="7">
            订单状态：
            <el-select v-model="formData.provinceCity" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="formData.orderStatus"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            商品名称：
            <el-input
              placeholder="请输入内容"
              v-model="formData.productName"
              clearable
              style="width: 393px;"
            ></el-input>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">
            支付状态：
            <el-select v-model="formData.provinceCity" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="formData.paymentStatus"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="7">
            手机：
            <el-input
              placeholder="请输入内容"
              v-model="formData.userPhoneNumber"
              clearable
              style="width: 215px;"
            ></el-input>
          </el-col>
          <el-col :span="5">
            订单类型：
            <el-select v-model="formData.provinceCity" placeholder="请选择" style="width: 205px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="formData.orderType"
                :size="mini"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-button type="primary">查询</el-button>
            <el-button plain>重置</el-button>
          </el-col>
        </el-row>

        <el-form-item label="订单类型">
          <el-select v-model="formData.orderType" placeholder="请选择">
            <el-option
              v-for="item in orderTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card"></el-card>
    </el-main>
    <el-footer style="background-color: #ffffff;">
      <el-card class="box-card">
        <el-row>
          <el-col :span="6" :offset="15">
            <el-pagination
              bcakground
              :page-sizes="[5,10,15,20]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total,sizes,prev,pager,next"
              :total="total"
              @next-click="nextPage"
              @prev-click="forwordone"
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageSize: 5,
      pageNum: 1,
      isCollapse: true,
      formData: {
        merchantName: "",
        provinceCity: "",
        orderTime: [],
        orderNumber: "",
        orderStatus: "",
        productName: "",
        paymentStatus: "",
        userPhoneNumber: "",
        orderType: ""
      },
      merchantOptions: [
        { value: "option1", label: "选项一" },
        { value: "option2", label: "选项二" }
        // 更多选项...
      ],
      provinceCityOptions: [
        { value: "province1", label: "省份一" },
        { value: "city1", label: "城市一" }
        // 更多选项...
      ],
      orderStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      paymentStatusOptions: [
        { value: "status1", label: "状态一" }
        // 更多选项...
      ],
      orderTypeOptions: [
        { value: "type1", label: "类型一" }
        // 更多选项...
      ],
      activeIndex: "1",
      menuItems: [
        { icon: require("../../assets/执行请求.png"), description: "执行请求" },
        {
          icon: require("../../assets/整理态 [转换].png"),
          description: "整理态"
        },
        { icon: require("../../assets/查看事例.png"), description: "查看事例" },
        { icon: require("../../assets/耳机.png"), description: "耳机" },
        {
          icon: require("../../assets/密码 验证码.png"),
          description: "验证码"
        },
        { icon: require("../../assets/通话保持.png"), description: "通话保持" },
        { icon: require("../../assets/静音.png"), description: "静音" },
        {
          icon: require("../../assets/外呼-copy.png"),
          description: "外呼"
        },
        { icon: require("../../assets/发送短信.png"), description: "发送短信" },
        {
          icon: require("../../assets/M_结束会话.png"),
          description: "结束会话"
        },
        { icon: require("../../assets/退出.png"), description: "退出" }
      ]
    };
  },
  methods: {
    // queryAllOrder() {
    //   this.$axios("api/order-server/queryAllOrder").then(res => []);
    // },
    onCurrentChange(val) {
      this.pageNum = val;
      this.queryAllLendin();
    },
    onSizeChange(val) {
      //最新的pageSize
      this.pageNum = 1;
      this.pageSize = val;
      this.queryAllLendin();
    },
    forwordone(val) {
      this.pageNum = val;
      this.queryAllLendin();
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryAllLendin();
    },
    navigateToComponentA() {
      this.$router.push("/orderQuery");
    },
    navigateToComponentB() {
      this.$router.push("/logisticsQuery");
    },
    navigateToComponentC() {
      this.$router.push("/afterSaleQuery");
    },
    navigateToComponentD() {
      this.$router.push("/userQuery");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {}
};
</script>

<style scoped>
.menu-with-icons.el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去除下划线 */
}

.menu-item-with-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.icon-description {
  margin-top: -20px;
  font-size: 10px;
}

.menu-item-with-icon img {
  width: 20px;
  height: auto;
}

.el-header {
  background-color: #ffffff;
}

.el-aside {
  background-color: #f4f4f4;
}

.el-main {
  background-color: #ffffff;
}

.el-footer {
  background-color: #f4f4f4;
}
.label {
  font-weight: normal;
}
.value {
  font-weight: bold;
}
</style>